<template>
  <div class="main">
    <el-form :inline="true" label-width="120px" labelPosition="left" :model="get_resources">
      <el-row type="flex" justify="space-around">
        <el-col :span="11">
          <el-form-item label="播出日期">
            <el-date-picker
              style="width:300px"
              type="daterange"
              v-model="get_resources.player_date"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="媒介">
              <el-select v-model="get_resources.medium_public.get_medium" style="width:300px;" value-key="id" @change="mediumChange" placeholder="请选择">
                <el-option
                  v-for="item in mediumList"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      
    <el-row type="flex" justify="space-around">
        <el-col :span="11">
          <el-form-item label="频道">
              <el-select v-model="get_resources.medium_public.get_media" value-key="id" @change="meidaChange" style="width:300px;" placeholder="请选择">
                <el-option
                  v-for="item in mediaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="节目">
              <el-select v-model="get_resources.medium_public.get_program" style="width:300px;" value-key="id" @change="programChange" placeholder="请选择">
                <el-option
                  v-for="item in programList"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      
      <el-row type="flex" justify="space-around">
        <el-col :span="11">
          <el-form-item label="资源类型">
              <el-select v-model="get_resources.medium_public.get_resource" value-key="id" @change="resourceTypeChange" style="width:300px;" placeholder="请选择">
                <el-option
                  v-for="item in resourceTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="资源">
              <el-select v-model="get_resources.id" style="width:300px;" placeholder="请选择">
                <el-option
                  v-for="item in resourceList"
                  :key="item.id"
                  :label="item.resources_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      
      <el-row type="flex" justify="space-around">
        <el-col :span="11">
            <el-form-item label="暴露频次(天)">
                <el-input v-model="get_resources.second"  style="width:300px"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="时长">
              <el-select v-model="get_resources.often" style="width:300px;" placeholder="请选择">
                <el-option
                  v-for="item in ofenList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      
      <el-row type="flex" justify="space-around">
        <el-col :span="11">
            <el-form-item :label="get_resources.cost_type == 1 ? '费用(万元/月)' : '费用(%)' ">
                <el-input v-model="get_resources.expenses"  style="width:300px"></el-input>
                <!-- <el-input v-model="get_resources.expenses"  style="width:300px" suffix-icon='%' v-if="get_resources.cost_type == 2"></el-input> -->
            </el-form-item>
            <span class="feeControl" v-if="get_resources.cost_type == 2" @click="changeCostType">百分比计费</span>
            <span class="feeControl" v-if="get_resources.cost_type == 1" @click="changeCostType">按月计费</span>
        </el-col>
        <el-col :span="11">
            <el-form-item :label="get_resources.fees_type == 1 ? '代理费(万元/月)' : '代理费(%)' ">
                <el-input v-model="get_resources.fees"  style="width:300px" ></el-input>
            </el-form-item>
            <span class="feeControl" v-if="get_resources.fees_type == 2" @click="changeFeesType">百分比计费</span>
            <span class="feeControl" v-if="get_resources.fees_type == 1" @click="changeFeesType">按月计费</span>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-around">
       <el-col :span="11">
            <el-form-item label="备注">
                <el-input v-model="get_resources.remark"  style="width:300px"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="11">
            <el-form-item label="">
                <el-checkbox v-model="get_resources.gift">赠 播</el-checkbox>
            </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
import {
  getmediaINFO,
  getChannel,
  getShow,
  GETresource_list,
  getResourceTypeList,
  timeRange
} from "../../../api/Salesman.js";

import { SETDATE } from "@/api/System.js";
import formatEveryDay from "./timeFormat.js";
import data from "../motheds";
import generateUUID from "./uuid.js";
export default {
  props:['addType'],
  data() {
    return {
      get_resources: {
          id:'',
          resources_name:'',
          second:'',
          often:'',
          expenses:'',
          cost_type:1,
          fees:'',
          fees_type:1,
          gift:0,
          player_date:'',
          medium_public:{
            //   meijie
              get_medium:{
                  
              },
            //   ziyuanleixin
              get_resource:{
                  
              },
            //   jiemu
              get_program:{
                 
              },    
            //   pingdao
              get_media:{
                  
              }
          }
      },
      mediumList:[],
      mediaList:[],
      programList:[],
      resourceTypeList:[],
      resourceList:[],
      ofenList:[]
    };
  },
  methods:{
      changeCostType(){
          this.get_resources.cost_type == 1 ? this.get_resources.cost_type = 2 : this.get_resources.cost_type = 1
      },
      changeFeesType(){
          this.get_resources.fees_type == 1 ? this.get_resources.fees_type = 2 : this.get_resources.fees_type = 1
      },
    //   获取媒介
    getMediumList(){
        getmediaINFO({}).then((res)=>{
          if (res.code == 200) {
             this.mediumList = res.data.mediums;
          }else{
              this.$message.error('获取媒介失败,请关闭重试')
          }
        })
    },
    mediumChange(e){
        console.log(e)
        this.get_resources.medium_public.get_medium = e
        this.get_resources.medium_public.get_media={
          id:""
        };
        this.get_resources.medium_public.get_program={
          id:""
        };
        this.get_resources.medium_public.get_resource = {
          id:""
        };
        this.get_resources.id="";
        
    },
    // 获取频道
    getChannelList(id){
        let data = {
            medium_id:[id]
        }
        getChannel(data).then(res => {
        if (res.code == 200) {
          this.mediaList = res.data;
        }else{
            this.$message.error('获取频道失败,请关闭重试')
        }
      });
    },
    meidaChange(e){
        this.get_resources.medium_public.get_media = e
        this.get_resources.medium_public.get_program={
          id:""
        };
        this.get_resources.medium_public.get_resource ={
          id:""
        };
        this.get_resources.id="";
    },
    // 获取节目
    getProgramList(id){
        let data = {
            media_id: [id]
        }
        getShow(data).then(res => {
        if (res.code == 200) {
          this.programList = res.data;
        }else{
            this.$message.error('获取节目失败,请关闭重试')
        }
      });
    },
    programChange(e){
         this.get_resources.medium_public.get_program = e
         this.get_resources.medium_public.get_resource = {
          id:""
        };
         this.get_resources.id="";
    },
    getResourceType(){
      let data = {
        medium_id:this.getMediumId
      }
        getResourceTypeList({...data}).then(res => {
        if (res.code == 200) {
          this.resourceTypeList = res.data;
        }else{
            this.$message.error('获取资源类型失败,请关闭重试')
        }
      });
    },
    resourceTypeChange(e){
        this.get_resources.medium_public.get_resource = e
        
        this.get_resources.id="";
    },
    getResourceList() {
      let data = {
        media_id: this.get_resources.medium_public.get_media.id || '',
        table_name: this.get_resources.medium_public.get_medium.table_name || '',
        resources_id: this.get_resources.medium_public.get_resource.id || '',
        program_id: this.get_resources.medium_public.get_program.id || '',
        search_word: "",
        per: 9999999
      };
      GETresource_list(data).then(res => {
        if (res.code == 200) {
          this.resourceList = res.data.data;
        }else{
            this.$message.error('获取资源失败,请关闭重试')
        }
      });
    },
    getTimeList(id){
      let data = {
        medium_public_id:id
      }
      timeRange({...data}).then(res=>{
        if (res.code == 200) {
          this.ofenList = res.data
        }else{
          this.$message.error('获取资源时间错误，请重新选择')
        }
      })
    },
  },
  computed:{
    //   获取媒介id
      getMediumId(){
          return this.get_resources.medium_public.get_medium.id
      },
    //   获取频道id
      getMediaId(){
          return this.get_resources.medium_public.get_media.id
      },
    //   获取节目id
      getProgramId(){
          return this.get_resources.medium_public.get_program.id
      },  
    // 获取资源类型
      getResourceId(){
          return this.get_resources.medium_public.get_resource.id
      },
      // 获取资源id
      getResourceSelfId(){
          return this.get_resources.id
      }    

  },
  watch:{
      getMediumId(newVal,oldVal){
          if (newVal && newVal == '') {
              this.get_resources.medium_public.get_media = {}
          }
          this.getChannelList(newVal)
          this.getResourceType()
          this.getResourceList()
      },
      getMediaId(newVal,oldVal){
          if (newVal && newVal == '') {
              this.get_resources.medium_public.get_program = {}
          }
          this.getProgramList(newVal)
          this.getResourceList()
      },
      getProgramId(newVal,oldVal){
         this.getResourceList()
      }, 
      getResourceId(newVal,oldVal){
          this.getResourceList()
      },
      getResourceSelfId(newVal,oldVal){
          this.getTimeList(newVal)
      },
      addType(newVal,oldVal){
          if (newVal) {
            this.getMediumList()
              this.get_resources = newVal
              console.log(this.get_resources)
          }
      }
  },
  mounted(){
      this.getMediumList()
      
  }
};
</script>

<style scoped lang='scss'>
.main {
  width: 100%;
  height: 100%;
}
.feeControl{
    font-size: 14px;
    color: #169bd5;
    cursor: pointer;
    line-height: 36px;
}
</style>